<template>
  <a-drawer
    :maskClosable="false"
    :visible="vdata.visible"
    :title=" vdata.isAdd ? '新增服务商' : '修改服务商' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="服务商名称" name="isvName">
            <a-input
              v-model:value="vdata.saveObject['isvName']"
              placeholder="请输入服务商名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="服务商简称" name="isvShortName">
            <a-input
              v-model:value="vdata.saveObject['isvShortName']"
              placeholder="请输入服务商简称"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="联系人姓名" name="contactName">
            <a-input
              v-model:value="vdata.saveObject['contactName']"
              placeholder="请输入联系人姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="联系人手机号" name="contactTel">
            <a-input
              v-model:value="vdata.saveObject['contactTel']"
              placeholder="请输入联系人手机号"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="联系人邮箱" name="contactEmail">
            <a-input
              v-model:value="vdata.saveObject['contactEmail']"
              placeholder="请输入联系人邮箱"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="状态" name="state">
            <a-radio-group v-model:value="vdata.saveObject['state']" :defaultValue="1">
              <a-radio :value="1">
                启用
              </a-radio>
              <a-radio :value="0">
                禁用
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-input v-model:value="vdata.saveObject['remark']" placeholder="请输入备注" type="textarea" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button style="margin-right:8px" @click="onClose">
        <CloseOutlined />取消
      </a-button>
      <a-button type="primary" style="margin-right:8px" :loading="vdata.btnLoading" @click="handleOkFunc">
        <CheckOutlined />保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts" >
import { API_URL_ISV_LIST, req } from '@/api/manage'
import { ref, reactive, getCurrentInstance, onMounted, defineProps, defineExpose } from 'vue'

// 导入全局函数
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// 组件
const infoFormModel = ref()


// 定义函数
const props = defineProps({
  callbackFunc: { type: Function,default:null }
})


const vdata = reactive({

      btnLoading: false,
      isAdd: true, // 新增 or 修改页面标志
      saveObject: {}, // 数据对象
      recordId: null, // 更新对象ID
      visible: false, // 是否显示弹层/抽屉
      rules: {
        isvName: [ { required: true, message: '请输入服务商名称', trigger: 'blur' } ],
        isvShortName: [ { required: true, message: '请输入服务商简称', trigger: 'blur' } ],
        contactEmail: [{ required: false, pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱地址', trigger: 'blur' }],
        contactTel: [{ required: false, pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }]
      }

})

      
    function show (recordIdParam) { // 弹层打开事件
      vdata.isAdd = !recordIdParam
      vdata.saveObject = { 'state': 1 } // 数据清空

      if (infoFormModel.value !== undefined) {
        infoFormModel.value.resetFields()
      }

      if (!vdata.isAdd) { // 修改信息 延迟展示弹层
        vdata.recordId = recordIdParam
        req.getById(API_URL_ISV_LIST, vdata.recordId).then(res => {
          vdata.saveObject = res
          })
        vdata.visible = true
      } else {
        vdata.visible = true // 立马展示弹层信息
      }
    }

    function handleOkFunc () { // 点击【确认】按钮事件
        infoFormModel.value.validate().then(valid => {
            vdata.btnLoading = true
            // 请求接口
            if (vdata.isAdd) {
              req.add(API_URL_ISV_LIST, vdata.saveObject).then(res => {
                $infoBox.message.success('新增成功')
                vdata.visible = false
                props.callbackFunc() // 刷新列表
                vdata.btnLoading = false
              }).catch(res => {
                vdata.btnLoading = false
              })
            } else {
              req.updateById(API_URL_ISV_LIST, vdata.recordId, vdata.saveObject).then(res => {
                $infoBox.message.success('修改成功')
                vdata.visible = false
                props.callbackFunc() // 刷新列表
                vdata.btnLoading = false
              }).catch(res => {
                vdata.btnLoading = false
              })
            }
        })
    }
    function onClose () {
      vdata.visible = false
    }

defineExpose({ show })

</script>
